<!-- <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" type="text/javascript"></script>
	
</head>

<body>

    <div id="app">
		
		<div>
			<button @click="change(1)">1</button>
			<button @click="change(2)">2</button>
			<button @click="change(3)">3</button>
		</div>

		<div v-if="componentIndex==1">
			<component-one></component-one>
		</div>

		<div v-else-if="componentIndex==2">
			<component-two></component-two>
		</div>

		<div v-else>
			<component-three></component-three>
		</div>

    </div>

    <script>
		
		Vue.component('component-one', {
			data: function () {
				return {}
			},
			template: 	'<div>'+
							'<div>组件1</div>'+
						'</div>'
		})

		Vue.component('component-two', {
			data: function () {
				return {}
			},
			template: 	'<div>'+
							'<div>组件2</div>'+
						'</div>'
		})

		Vue.component('component-three', {
			data: function () {
				return {}
			},
			template: 	'<div>'+
							'<div>组件3</div>'+
						'</div>'
		})

		let vm = new Vue({
			el: '#app',
			data: {
				componentIndex:1
			},
			methods:{
				change(v){
					this.componentIndex = v;
				}
			}
		});

		
    </script>
</body>
</html> -->

<!-- <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" type="text/javascript"></script>
	
</head>

<body>

    <div id="app">
		
		<div>
			<button @click="change('component-one')">1</button>
			<button @click="change('component-two')">2</button>
			<button @click="change('component-three')">3</button>
		</div>

		<component :is='componentX'></component>

    </div>

    <script>
		
		Vue.component('component-one', {
			data: function () {
				return {}
			},
			template: 	'<div>'+
							'<div>组件1</div>'+
						'</div>'
		})

		Vue.component('component-two', {
			data: function () {
				return {}
			},
			template: 	'<div>'+
							'<div>组件2</div>'+
						'</div>'
		})

		Vue.component('component-three', {
			data: function () {
				return {}
			},
			template: 	'<div>'+
							'<div>组件3</div>'+
						'</div>'
		})

		let vm = new Vue({
			el: '#app',
			data: {
                // * 组件名字
				componentX:'component-one'
			},
			methods:{
				change(v){

					this.componentX = v;
				}
			}
		});

		
    </script>
</body>
</html> -->

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" type="text/javascript"></script>

</head>

<body>

  <div id="app">

    <div>
      <button @click="change('component-one')">1</button>
      <button @click="change('component-two')">2</button>
      <button @click="change('component-three')">3</button>
    </div>

    <keep-alive>
      <component :is='componentX'></component>
    </keep-alive>
  </div>

  <script>
    Vue.component('component-one', {
      data: function () {
        return {}
      },
      template: '<div>' +
        '<div>组件1</div>' +
        '<input></input>' +
        '</div>'
    })

    Vue.component('component-two', {
      data: function () {
        return {}
      },
      template: '<div>' +
        '<div>组件2</div>' +
        '</div>'
    })

    Vue.component('component-three', {
      data: function () {
        return {}
      },
      template: '<div>' +
        '<div>组件3</div>' +
        '</div>'
    })



    let vm = new Vue({
      el: '#app',
      data: {
        componentX: 'component-one'
      },
      methods: {
        change(v) {

          this.componentX = v;
        }
      }
    });

  </script>
</body>

</html>
